<template>
  <div class="hello" >
    <!--导航栏开始-->
    <nav-tab :navIndex="0"></nav-tab>
    <div class="etc" >
    <!--轮播图开始-->
    <div id="marquee3">
      <!-- :options="bannerSwiper" -->
      <swiper class="swiper" :options="bannerSwiper">
        <swiper-slide
          class="swiper-slide"
          v-for="item in bannerList"
          :key="item"
        >
          <img :src="item" alt />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <!--  <div class="swiper-container">
        <div ref="mySwiper" class="swiper-wrapper"> 
          <div class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
            <img :src="item.img" alt />
          </div> -->

      <!-- <swiper-slide class="swiper-slide">
            <img src="../assets/banner2.jpg" alt />
          </div>
          <div class="swiper-slide">
            <img src="../assets/banner3.jpg" alt />
          </div>
          <div class="swiper-slide">
            <img src="../assets/banner4.jpg" alt />
          </swiper-slide> -->
      <!-- <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
          <div class="swiper-button-next" slot="button-next" @click="next"></div>
          <div class="swiper-pagination" slot="pagination"></div> -->
      <!-- </div> -->
      <!-- </div> -->
    </div>
    <!--轮播图结束-->
    <!--主体开始-->

    <div class="sousuo">
      <span class="reci">大家都在搜：
        <router-link to="/page/details?num=0"><span class="hand">消防水泵</span></router-link>
          &nbsp;&nbsp;
        <router-link to="/page/details?num=3"><span class="hand">火灾报警</span></router-link>
        &nbsp;&nbsp;
        <router-link to="/page/details?num=2"><span class="hand">气体灭火</span></router-link>
        &nbsp;&nbsp;
        <router-link to="/page/details?num=1"><span class="hand">消防泵控制柜</span></router-link>
      </span>
      <div class="rightfrom">
        <input type="text" class="ssk1" placeholder="气体灭火" v-model="search"/>
        <p class="ssk2" @click="goGoodsList">搜索</p>
      </div>
    </div>
    <div class="main">
      <div class="main1">
        <h1>{{titleList[0].title}}</h1>
        <p>{{titleList[0].f_title}}</p>
      </div>
      <div class="crowder">
        <div class="crowder-main">
          <p class="p1">
            建筑总包方来
            <br />大卖场采购的地方
          </p>
          <p class="p2">
            个人施工队来
            <br />大卖场采购的地方
          </p>
          <p class="p3">
            消防工程安装公司来
            <br />大卖场采购的地方
          </p>
          <p class="p4">
            行业各大门市商铺来
            <br />大卖场采购的地方
          </p>
          <p class="p5">
            地产建设公司来
            <br />大卖场采购的地方
          </p>
          <p class="p6">
            政府公益项目业主来
            <br />大卖场采购的地方
          </p>
        </div>
      </div>
    </div>
    <!--主体结束-->
    <!--优势开始-->
    <div class="advantage">
      <h1>{{titleList[1].title}}</h1>
      <div class="advantage0">
        <div class="advantage1">
          <h2>01</h2>
          <p>
            现货批发
            <br />实力卖场
          </p>
        </div>
        <div class="advantage2">
          <h2>02</h2>
          <p>
            让利更多
            <br />质优价美
          </p>
        </div>
        <div class="advantage3">
          <h2>03</h2>
          <p>
            保证质量
            <br />严格质检
          </p>
        </div>
        <div class="advantage4">
          <h2>04</h2>
          <p>
            满足需求
            <br />量身定做
          </p>
        </div>
        <div class="advantage5">
          <h2>05</h2>
          <p>
            深度加盟
            <br />连锁厂家
          </p>
        </div>
        <div class="advantage6">
          <h2>06</h2>
          <p>
            全程维护
            <br />快速响应
          </p>
        </div>
      </div>
    </div>
    <!--优势结束-->
    <!--横幅开始-->
    <div class="slogan">
      <div class="slogant">
        <div class="slogan-left">
          <h1>{{titleList[2].title}}</h1>
          <p>{{titleList[2].f_title}}</p>
        </div>
        <div class="slogan-right">
          <div class="right-top">
            <div class="biao">
              <img src="../assets/888.jpg" />
            </div>
            <div class="rexian">
              <h3>全国服务热线：</h3>
              <p>{{configData.mobile}}</p>
            </div>
          </div>
          <div class="right-foot">
           <router-link to="/page/about?num=6"> <span>立即咨询</span></router-link>
          </div>
        </div>
      </div>
    </div>
    <!--横幅结束-->
    <!--			产品中心开始-->
    <div class="product">
      <h1 class="pro">{{titleList[3].title}}</h1>
      <p class="pro0">{{titleList[3].f_title}}</p>
      <div class="Water-pump">
        <!-- 商品1开始 -->
        <div
          class="pros_content"
          v-for="(item, index) in shopList"
          :key="index"
        >
          <div class="Water" @click="goDetails(index)">
            <p class="Water1">{{ item.name }}</p>
            <div class="many">
              <p class="Water2 hand">查看更多</p>
            </div>
          </div>
          <div class="pro1">
            <ul>
              <li
                v-for="(im, index1) in item.get_goods"
                :key="index1"
                @mouseover="mouseOver(index, index1)"
                v-show="index1 < 4"
              >
                <!-- @click.stop="mouseOver(index, index1)" -->
                <!-- @mouseleave="mouseLeave(index, index1)" -->
                <div class="item" v-show="!im.flag">
                  <em class="cc one_over">{{ im.title }}</em>
                  <b v-if="im.img && im.img.length>0">
                    <img class="aa" :src="im.img[0]" />
                    <img class="bb" :src="im.img[0]" />
                  </b>
                  <p>
                    <em>
                      {{ im.description }}
                    </em>
                    <strong class="hand" @click.stop="goshopDetail(item.id, im.id)"
                      >查看详情</strong
                    >
                  </p>
                </div>
                <div class="cur" v-show="im.flag" @click.stop="goshopDetail(item.id, im.id)">
                  <em class="cc one_over">{{ im.title }}</em>
                  <b v-if="im.img && im.img.length>0">
                    <img class="aa" :src="im.img[0]" />
                    <img class="bb" :src="im.img[0]" />
                  </b>
                  <p>
                    <em>
                      {{ im.description }}
                    </em>
                    <strong class="hand" @click.stop="goshopDetail(item.id, im.id)"
                      >查看详情</strong
                    >
                  </p>
                </div>
              </li>
            </ul>
            <div class="clear"></div>
          </div>
        </div>
        <!-- 商品1结束 -->
      </div>
    </div>
    <!--产品中心结束-->
    <!--更多-->
    <div class="gengduo">
      <img class="imgg" src="../assets/gengduo.jpg" />
    </div>
    <!--更多-->
    <!--资质开始-->
    <div class="qualifications">
      <div class="fica-top">
        <div class="fica1">
          <h1>{{titleList[4].title}}</h1>
          <p>{{titleList[4].f_title}}</p>
        </div>
        <div class="fica2">
          <ul>
            <li><img src="../assets/17.png" /></li>
            <li><img src="../assets/16.png" /></li>
            <li><img src="../assets/15.png" /></li>
            <li><img src="../assets/14.png" /></li>
          </ul>
        </div>
      </div>
      <!-- <img src="../assets/11_03.jpg" /> -->
      <div class="fica-foot">
        <div class="fica3">
          <h1>{{titleList[5].title}}</h1>
          <p>{{titleList[5].f_title}}</p>
        </div>
        <div class="fica4">
          <ul>
            <li><img src="../assets/3.png" /></li>
            <li><img src="../assets/4.png" /></li>
            <li><img src="../assets/5.png" /></li>
            <li><img src="../assets/6.png" /></li>
            <li><img src="../assets/7.png" /></li>
            <li><img src="../assets/8.png" /></li>
          </ul>
        </div>
        <!-- <img class="tp" src="../assets/11_07.jpg" /> -->
      </div>
    </div>
    <!--资质结束-->
    <!-- 客户见证开始-->
    <div class="Customer-witness">
      <h1>{{titleList[6].title}}</h1>
      <p class="jz">{{titleList[6].f_title}}</p>
      <div class="witness">
        <ul>
          <li class="hand" v-for="(item,index) in khjzList" :key="index" :class="{ active: khjzindex === index }" @click="khjzDetail(item,index)" v-if="index<6">
            {{item.title}}
          </li>
        </ul>
      </div>
      <!-- 内容 -->
      <div class="khjz">
        <template v-if="khjzdata.length>0">
          <div class="jz-img">
            <img v-if="khjzdata[0].img" :src="khjzdata[0].img[0]" />
          </div>
          <div class="jz-text">
            <h1>{{khjzdata[0].title}}</h1>
            <p>
              {{khjzdata[0].Introduction}}
            </p>
            <strong>
              <p class="hand" @click="goDetail(khjzdata[0].id)">查看详情+++</p>
            </strong>
          </div>
        </template>
        <p v-if="khjzdata.length<1">暂无数据</p>
      </div>
      <!-- <div class="vv" v-show="index === 2">ppp</div>
      <div class="bb" v-show="index === 3">ooo</div>
      <div class="nn" v-show="index === 4">iii</div>
      <div class="mm" v-show="index === 5">uuu</div>
      <div class="ll" v-show="index === 6">yyy</div> -->
      <!-- 内容 -->
    </div>
    <!-- 客户见证结束-->
    <!-- 交易开始-->
    <div class="cooperation">
      <h1>万力达消防设备大卖场批发交易进行中</h1>
    </div>
    <!-- 交易结束-->
    <!-- 横幅 -->
    <div class="ogan">
      <div class="logan">
        <div class="logan-left">
          <img src="../assets/202.png" />
        </div>
        <div class="logan-right">
          <div class="logan1">
            <div>
              <img src="../assets/phone.jpg" />
            </div>
            <div class="all">
              <h3>全国服务热线：</h3>
              <p>{{configData.mobile}}</p>
            </div>
          </div>
          <div class="logan2">
            <router-link to="/page/about?num=6"><span>立即咨询</span></router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 横幅 -->
    <!-- 新闻资讯开始 -->
    <div class="xwzx">
      <h1>{{titleList[7].title}}</h1>
      <p class="zwwld">{{titleList[7].f_title}}</p>
      <div class="dmcdt">
        <div class="gengd">
          <p>{{newsList[0].title}}</p>
          <span class="hand" @click="jumpMore">更多+</span>
          <hr />
        </div>
        <div class="zxdts">
          <template v-if="newsList.length>0&&newsList[0].get_list.length>0">
            <div
              class="anquanding hand"
              v-for="(item, index) in newsList[0].get_list"
              :key="index"
              @click="goDetail(item.id)"
            >
              <h2>{{ item.time }}</h2>
              <p class="one_over2">{{ item.title }}</p>
              <span>{{ item.Introduction }}</span>
              <img v-if="item.img&&item.img.length>0" :src="item.img[0] || '../assets/zxdt.jpg'" />
            </div>
          </template>
        </div>
        <div class="lizuhangye">
          <ul style="list-style: none">
            <template v-if="newsList.length>0&&newsList[0].get_article.length>0">
              <li
                class="hand"
                v-for="(item, index) in newsList[0].get_article"
                :key="index"
                v-show="index < 3"
                @click="goDetail(item.id)"
              >
                <span>{{ item.time }}</span
                >{{ item.title }}
              </li>
            </template>
          </ul>
        </div>
      </div>
      <div class="dmcbk">
        <div class="baike">
          <p>{{newsList[1].title}}</p>
          <span class="hand" @click="jumpMore">更多+</span>
          <hr />
        </div>
        <div class="dmcbks">
          <template v-if="newsList.length>0&&newsList[1].get_article.length>0">
            <template v-if="newsList.length>0&&newsList[1].get_article[0].img">
              <img :src="newsList[1].get_article[0].img[0] || '../assets/zxdt.jpg'" />
            </template>
            <div class="dmcbkx">
              <ul>
                <li
                  class="one_over hand"
                  v-for="item in newsList[1].get_article"
                  :key="item.id"
                  @click="goDetail(item.id)"
                >
                  {{ item.title }}以安全定价取信，靠规模立足行业
                </li>
              </ul>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 新闻资讯结束 -->
    <!-- 关于我们开始 -->
    <div class="guanyu">
      <div class="bjtp">
        <div class="zoujin">
          <h3>{{titleList[8].title}}</h3>
          <h1 class="contxt">{{titleList[8].f_title}}</h1>
          <p class="wenben">
            {{titleList[8].description}}
            <!-- 万力达消防大卖场是国内顶尖的消防设备批发走量设备集结机构，更是生产厂家深度依赖的大卖场销售平台主渠道。万达大卖场以批发消防设备制柜量大而享誉业内，以销量大、质量优、性价比高、价格低，赢得了用户公认的优质口碑，万力达大卖场致力于为客户提供完善的售前、售中、售后一站式技术服务，零售商更是可享批发平台以下优惠价格福利！行业
            208家生产厂家挤身加盟到万力达卖场中做批发冲量。是地产商、建筑总包商、消防工程公司、各大批发门店、个人施工队、政府项目业主争相合作大平台。卖场以“批发量大；价格更便宜”为宗旨。为您节省每一分钱也是万达人的心愿！ -->
          </p>
          
        </div>
      </div>
      <h2>合作证书</h2>
    </div>
    <!-- 证书开始 -->
    <div class="zhengshu" style="position: relative">
      <swiper ref="swiper1" class="swiper1" :options="swiperOption">
        <div class="swiper-slide">
          <!--  v-for="(item, index2) in certList" :key="index2" -->
          <!-- <img :src="item.img" /> -->
          <img src="../assets/09.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="../assets/08.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="../assets/07.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="../assets/06.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="../assets/05.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="../assets/05.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="../assets/06.jpg" alt />
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
      <div class="swiper-button-next" slot="button-next" @click="next"></div>
    </div>
    <!-- 证书结束 -->
    <!-- 关于我们结束 -->
    </div>

    <!-- 页脚开始 -->
    <Footer></Footer>
  </div>
</template>
<script>
import Swiper from "swiper";
/* import "swiper/swiper-bundle.css"; */
import NavTab from "../components/navtab";
import Footer from "../components/footer";

export default {
  components: {
    NavTab,
    Footer,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 5,
        spaceBetween: 40,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      khjzindex: 0,
      titleList: [],
      configData:{},
      bannerList: [],
      bannerSwiper: {
        notNextTick: true,
        loop: true,
        autoplay: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: true,
        },
      },
      shopList: [], // 产品中心
      newsList: [], // 新闻资讯
      khjzList: [], // 客户见证
      khjzdata: {}, // 客户见证详情
      certList: [],
      witnessList: [],
      likeList:[],//产品标题
      search: ''
    };
  },
  created() {
    console.log(this.$route.query.num);
    if (this.$route.query.num) this.khjzindex = +this.$route.query.num;
    // if((igator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    //   window.location.href="home_mobile.html";
    // }
    // $(window).resize(function(){
    //   if($(window).width() < 600) {
    //     window.location.href="home_mobile.html";
    //   }
    // });
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      this.$router.push("/page/home_mobile");
    } else {
      this.$router.push("/");
    }
  },
  mounted() {
    document.title = '万力达消防设备大卖场'
    // this.banner();
    this.getBanner();
    this.getShopClass();
    this.getNews(0);
    this.getNews(1);
    this.getLike();
    this.getWetch();
    this.getCert();
    this.getConfig();
    // this.getWitness();
  },
  methods: {
    prev() {
      this.$refs.swiper.$swiper.slidePrev();
    },
    next() {
      this.$refs.swiper.$swiper.slideNext();
    },
    mouseOver(i, i1) {
      console.log(i, i1);
      console.log(this.shopList[i]);
      for (let item of this.shopList[i].get_goods) {
        console.log(item);
        item.flag = false;
      }
      this.shopList[i].get_goods[i1].flag = true;
      this.$forceUpdate();
      console.log("hover", this.shopList[i]);
    },
    mouseLeave(i, i1) {
      // this.shopList[i].get_goods[i1].flag = false;
      // this.$forceUpdate();
    },
    getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
          
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getBanner() {
      //get 请求接口
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config/pages")
        .then((res) => {
          console.log("banner", res.data.result);
          this.titleList = res.data.result.content;
          this.bannerList = res.data.result.content[0].banner_img;
          // console.log(this.bannerList)
        })
        .catch((error) => {
          console.log(error);
        });
    },
    banner() {
      let swiper = new Swiper(".swiper-container", {
        loop: true,
        autoplay: true,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        // pagination: {
        //   el: '.swiper-pagination',
        // },
      });
    },
    getShopClass() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/home")
        .then((res) => {
          console.log("产品中心", res.data.result);
          this.shopList = res.data.result;
          if (this.shopList.length > 0) {
            for (const item of this.shopList) {
              if (item.get_goods.length > 0) {
                for (const im of item.get_goods) {
                  im.flag = false;
                }
                item.get_goods[item.get_goods.length - 1].flag = true;
              }
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goshopDetail(fid, zid) {
      console.log(fid, zid);
      // 跳转商品详情
      this.$router.push({
        path: "/page/details",
        query: {
          num: 0,
          fid: fid,
          zid: zid,
        },
      });
    },
    goGoodsList () {
      this.$router.push({
        path: "/page/details",
        query: {
          search: this.search
        },
      });
    },
    getNews(num) {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/home?type="+num)
        .then((res) => {
          if (num === 0) {
            console.log("新闻资讯", res.data.result);
            this.newsList = res.data.result;
          }
          if (num === 1) {
            console.log("客户见证", res.data.result);
            this.khjzList = res.data.result;
            this.khjzdata = this.khjzList[0].get_article
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 跳转新闻详情
    goDetail(id) {
      this.$router.push({
        path: "/page/newsDetail",
        query: {
          id: id,
        },
      });
    },
    goDetails(n) {
      // 跳转产品页
      this.$router.push({
        path: "/page/details",
        query: {
          num: n,
        },
      });
    },
    jumpMore () {
      this.$router.push({
        path: "/page/news"
      });
    },
    khjzDetail (im, i) {
      this.khjzindex = i
      this.khjzdata = []
      console.log(im, i)
      if (im && im.get_article.length>0) {
        this.khjzdata = im.get_article
      }
      console.log(this.khjzdata)
    },
    getLike() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/like")
        .then((res) => {
          console.log("产品标题", res.data.result);
          this.likeList = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getWetch() { 
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config/wetch")
        .then((res) => {
          console.log(res.data.result)
          let script = document.createElement('script')
          let mess = res.data.result.content
          script.type = 'text/javascript'
          script.text = mess
          document.getElementsByTagName('head')[0].appendChild(script)
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getCert() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/cert")
        .then((res) => {
          console.log("证书图片", res.data.result.data);
          this.certList = res.data.result.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 100%;
  min-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
/* 轮播图开始*/
/* .swiper-container {
  width: 100%;
} */
.swiper-slide img {
  width: 100%;
  text-align: center;
}
/* 轮播图结束*/
/* 主体开始*/
.sousuo {
  width: 1200px;
  margin: 0 auto;
  height: 80px;
}
.reci {
  float: left;
  display: block;
  margin-top: 10px;
  font-size: 20px;
  overflow: hidden;
}
.rightfrom {
  float: right;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.ssk1 {
  line-height: 35px;
  background: #e5e5e5;
  border: 0 solid #fff;
  padding-left: 5px;
}
.ssk2 {
  line-height: 33px;
  padding: 0px 10px;
  font-size: 18px;
  text-align: center;
  color: #fff;
  background: #0061ae;
  border: 0;
}
.main {
  width: 100%;
  margin: 0 auto;
}
.main1 {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.main1 h1 {
  font-size: 30px;
  font-weight: bold;
}
.main1 p {
  font-size: 18px;
  padding: 20px 0px;
}
.crowder {
  width: 100%;
  height: 828px;
  background: url("../assets/shouye2.gif") center;
}
.crowder-main {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.p1 {
  /* padding-top: 3.3em;
  padding-left: 3.05rem; */
  font-size: 20px;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 0.4rem;
  transform: translateX(-50%);
}
.p2 {
  float: left;
  padding-top: 12em;
  font-size: 20px;
  color: #fff;
  padding-left: 9em;
  overflow: hidden;
  position: absolute;
}
.p3 {
  padding-top: 12em;
  font-size: 20px;
  color: #fff;
  padding-left: 42.5em;

  position: absolute;
}
.p4 {
  padding-top: 26em;
  font-size: 20px;
  color: #fff;
  padding-left: 8em;
  overflow: hidden;
  position: absolute;
}
.p5 {
  padding-top: 26em;
  font-size: 20px;
  color: #fff;
  padding-left: 42.5em;
  overflow: hidden;
  position: absolute;
}
.p6 {
  padding-top: 35em;
  padding-left: 25.5em;
  font-size: 20px;
  color: #fff;
  overflow: hidden;
  position: absolute;
}
/* 主体结束*/
/*优势开始*/
.advantage0 {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.advantage {
  width: 1200px;
  margin: 0 auto;
  height: 500px;
}
.advantage1 {
  margin-left: 29px;
  margin-top: 176px;
  width: 134px;
  height: 212px;
  background: #0d76ca;
  position: relative;
}
.advantage1:before {
  content: "";
  position: absolute;
  top: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-bottom: 39px solid #0d76ca;
}
.advantage1:after {
  content: "";
  position: absolute;
  bottom: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-top: 39px solid #0d76ca;
}
.advantage h1 {
  display: block;
  margin-top: 2em;
  font-weight: bold;
  font-size: 30px;
  font-style: oblique;
  text-align: center;
}
.advantage2 {
  margin-top: 148px;
  margin-left: 68px;

  width: 134px;
  height: 212px;
  background: #0d76ca;
  position: relative;
}
.advantage2:before {
  content: "";
  position: absolute;
  top: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-bottom: 39px solid #0d76ca;
}
.advantage2:after {
  content: "";
  position: absolute;
  bottom: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-top: 39px solid #0d76ca;
}
.advantage3 {
  margin-top: 122px;
  margin-left: 68px;
  width: 134px;
  height: 212px;
  background: #0d76ca;
  position: relative;
}
.advantage3:before {
  content: "";
  position: absolute;
  top: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-bottom: 39px solid #0d76ca;
}
.advantage3:after {
  content: "";
  position: absolute;
  bottom: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-top: 39px solid #0d76ca;
}
.advantage4 {
  margin-top: 87px;
  margin-left: 68px;

  width: 134px;
  height: 212px;
  background: #0d76ca;
  position: relative;
}
.advantage4:before {
  content: "";
  position: absolute;
  top: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-bottom: 39px solid #0d76ca;
}
.advantage4:after {
  content: "";
  position: absolute;
  bottom: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-top: 39px solid #0d76ca;
}
.advantage5 {
  margin-top: 63px;
  margin-left: 68px;
  width: 134px;
  height: 212px;
  background: #0d76ca;
  position: relative;
}
.advantage5:before {
  content: "";
  position: absolute;
  top: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-bottom: 39px solid #0d76ca;
}
.advantage5:after {
  content: "";
  position: absolute;
  bottom: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-top: 39px solid #0d76ca;
}
.advantage6 {
  margin-top: 37px;
  margin-left: 68px;
  width: 134px;
  height: 212px;
  background: #0d76ca;
  position: relative;
}
.advantage6:before {
  content: "";
  position: absolute;
  top: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-bottom: 39px solid #0d76ca;
}
.advantage6:after {
  content: "";
  position: absolute;
  bottom: -39px;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-top: 39px solid #0d76ca;
}
.advantage1 h2 {
  font-size: 40px;
  font-style: oblique;
  color: #fff;
  text-align: center;
}
.advantage1 p {
  display: block;
  writing-mode: tb-rl;
  padding-left: 25px;
  padding-top: 5px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}
.advantage2 h2 {
  font-size: 40px;
  font-style: oblique;
  color: #fff;
  text-align: center;
}
.advantage2 p {
  display: block;
  writing-mode: tb-rl;
  padding-left: 25px;
  padding-top: 5px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}
.advantage3 h2 {
  font-size: 40px;
  font-style: oblique;
  color: #fff;
  text-align: center;
}
.advantage3 p {
  display: block;
  writing-mode: tb-rl;
  padding-left: 25px;
  padding-top: 5px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}
.advantage4 h2 {
  font-size: 40px;
  font-style: oblique;
  color: #fff;
  text-align: center;
}
.advantage4 p {
  display: block;
  writing-mode: tb-rl;
  padding-left: 25px;
  padding-top: 5px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}
.advantage5 h2 {
  font-size: 40px;
  font-style: oblique;
  color: #fff;
  text-align: center;
}
.advantage5 p {
  display: block;
  writing-mode: tb-rl;
  padding-left: 25px;
  padding-top: 5px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}
.advantage6 h2 {
  font-size: 40px;
  font-style: oblique;
  color: #fff;
  text-align: center;
}
.advantage6 p {
  display: block;
  writing-mode: tb-rl;
  padding-left: 25px;
  padding-top: 5px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}
/*优势结束*/
/*横幅开始1*/
.slogan {
  width: 100%;
  min-width: 1200px;
  height: 200px;
  background-image: linear-gradient(#e6e6e6, #f2f2f2);
  overflow: hidden;
}
.slogant,
.logan {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.slogan-left {
  text-align: center;
  padding: 60px 50px;
}
.slogan-left h1 {
  font-size: 29px;
  font-weight: bold;
}
.slogan-left p {
  font-size: 18px;
  margin-top: 15px;
}
.slogan-right {
  margin-left: 50px;
}
.right-top img {
  width: 50px;
  margin-top: 50px;
}
.rexian {
  margin-left: 55px;
  margin-top: -55px;
}
.rexian h3 {
  font-size: 18px;
  color: #0061ae;
}
.rexian p {
  color: #0061ae;
  font-size: 28px;
  font-weight: bold;
}
.right-foot {
  padding: 15px 60px;
}
.right-foot span {
  font-size: 15px;
  color: #fff;
  padding: 5px 30px;
  background: #d6af62;
  border: 0;
  width: 340px;
  height: 50px;
  border-radius: 10px;
}
/*横幅结束1*/
/*横幅开始2*/
.ogan {
  width: 100%;
  min-width: 1200px;
  height: 200px;
  background: #0061ae;
  overflow: hidden;
}
.logan1 img {
  width: 40px;
  margin-top: 50px;
}
.logan-right {
  padding: 0px 40px;
}
.all {
  margin-left: 55px;
  margin-top: -55px;
}
.logan-left img {
  padding: 40px 60px;
}
.logan1 h3 {
  color: #f3f3f3;
}
.logan1 p {
  color: #f3f3f3;
  font-size: 20px;
  font-weight: bold;
}
.logan2 {
  padding: 15px 60px;
}
.logan2 span {
  font-size: 15px;
  color: #fff;
  padding: 5px 30px;
  background: #d6af62;
  border: 0;
  width: 340px;
  height: 50px;
  border-radius: 10px;
}
/*横幅结束2*/
/*产品中心开始*/
.product {
  width: 1200px;
  margin: 0 auto;
}
.pro {
  margin-top: 1em;
  font-size: 30px;
  text-align: center;
}
.pro0 {
  margin-top: 20px;
  font-size: 18px;
  text-align: center;
}
.Water {
  float: left;
  width: 302px;
  height: 273px;
  background: #969696;
  overflow: hidden;
}
/* 商品开始 */
.Water-pump {
  width: 1200px;
  margin: 50px auto 0;
}
/* 查看开始 */
.Water1 {
  padding-top: 103px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.many {
  width: 148px;
  height: 36px;
  background: transparent;
  border: 1px solid #fff;
  margin: 33px auto 0;
}
.many:hover{
  background: #0061ae;
  border: none;
}
.Water2 {
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 36px;
}
/* 查看结束 */
/* 商品1开始 */
.pros_content {
  overflow: hidden;
  margin-bottom: 10px;
}
.pro1 {
  width: 895px;
  float: left;
}
.pro1 ul li {
  float: left;
  /* width: 178px; */
  position: relative;
  height: 273px;
  background-image: -moz-linear-gradient(left, #eeeeee, #e2e2e2);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pro1 ul li em {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: 33px;
  font-size: 16px;
  color: #000;
  font-style: normal;
  text-align: center;
  box-sizing: border-box;
  padding: 0 7%;
}
.pro1 ul li .cc {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: 240px;
  font-size: 16px;
  color: #000;
  font-style: normal;
  text-align: center;
  box-sizing: border-box;
  padding: 0 7%;
  white-space: nowrap;
}
.pro1 ul li em span {
  display: block;
  font-size: 14px;
  padding-top: 11px;
  line-height: 100%;
}
.pro1 ul li p {
  display: none;
}
.pro1 ul li b .bb {
  display: inline-block;
  position: absolute;
  bottom: 60px;
  /* margin-left: 26px; */
  left: 0;
  width: 170px;
}
.pro1 ul li b .aa {
  width: 170px;
  display: none;
}
.item {
  width: 178px;
  height: 100%;
  float: left;
  position: relative;
  /* background: #e3e3e3; */
  background-image: linear-gradient(to right,#EEEEEE,#E2E2E2);
}
.pro1 ul li .cur {
  float: left;
  background: #0061ae;
  width: 348px;
  height: 273px;
}
.pro1 ul li .cur em {
  display: none;
}
.pro1 ul li .cur b .aa {
  display: inline-block;
  position: absolute;
  top: 41px;
  right: 5px;
  display: block;
  width: 170px;
}
.pro1 ul li .cur b .bb {
  width: 170px;
  display: none;
}
.pro1 ul li .cur p {
  color: #fff;
  position: absolute;
  text-align: left;
  top: 4px;
  width: 100%;
  display: block;
}
.pro1 ul li .cur p em {
  display: block;
  width: 192px;
  height: 110px;
  line-height: 18px;
  font-size: 12px;
  font-style: normal;
  color: #fff;
  text-align: left;
  overflow: hidden;
}
.cur p em span {
  display: block;
}
.cur p strong {
  display: block;
  width: 57px;
  height: 19px;
  border-radius: 39px;
  border: 1px solid #fff;
  text-align: center;
  line-height: 19px;
  font-weight: normal;
  font-size: 12px;
  position: absolute;
  left: 35px;
  top: 178px;
}
/* 商品1结束 */
/* 商品2开始 */
.pros_content2 {
  margin-top: 10px;
  overflow: hidden;
}
/* 商品2结束 */
/* 商品3开始 */
.pros_content3 {
  margin-top: 10px;
  overflow: hidden;
}
/* 商品3结束 */
/* 商品4开始 */
.pros_content4 {
  margin-top: 10px;
  overflow: hidden;
}
/* 商品4结束 */
/*产品中心结束*/
/* 更多开始*/
.imgg {
  width: 100%;
  margin-top: 20px;
}
/* 更多结束*/
/*资质开始*/
.qualifications {
  width: 1200px;
  margin: 0 auto;
}
.qualifications h1 {
  font-size: 30px;
  margin-top: 2em;
  text-align: center;
}
.qualifications p {
  margin-top: 1em;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 2em;
}
.fica2 ul {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.fica2 li {
  padding: 10px 25px;
}
.fica4 ul {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.fica4 li {
  padding: 10px 5px;
}
.fica2 li,
.fica4 li {
  transition: 0.3s all ease;
  position: relative;
}
.fica2 li:hover {
  transform: scale(1.1);
  z-index: 1;
  background: #fff;
}
.fica4 li:hover {
  transform: scale(1.1);
  z-index: 1;
  background: #fff;
}

/*.qualifications img {
  display: block;
  margin: 0 auto;
}
 .tp {
  width: 1200px;
} */
/*资质结束*/
/*客户见证开始*/
.Customer-witness {
  width: 1200px;
  text-align: center;
  margin: 0 auto;
}
.Customer-witness h1 {
  font-size: 30px;
  text-align: center;
  margin-top: 2em;
}
.Customer-witness .jz {
  font-size: 18px;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 2em;
}
.witness {
  width: 1200px;
  height: 40px;
}
.witness li {
  line-height: 40px;
  padding: 0px 40px;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  border-left: 1px solid #ededed;
}
.witness ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow: hidden;
}
.witness li:hover {
  color: #ffffff;
  background: #d6af62;
}
.witness li:last-child {
  border-right: 1px solid #ededed;
}
.active {
  color: #fff;
  background: #d6af62;
}
.active a {
  color: #fff;
}
.khjz {
  width: 1200px;
  height: 450px;
  background: #f3f3f3;
  margin: 40px auto 0 auto;
}
.jz-img img {
  width: 700px;
  height: 400px;
  float: left;
  margin-left: 25px;
  margin-top: 25px;
}
.jz-text {
  float: right;
  width: 400px;
  margin-right: 2em;
}
.jz-text p {
  font-size: 14px;
  line-height: 32px;
}
/*客户见证结束*/
/* 合作开始 */
.cooperation {
  height: 669px;
  width: 100%;
/*   background: url("../assets/top.jpg") no-repeat;
  background-size: 100% 100%; */
   background: url("../assets/top.jpg") center;
}
.cooperation h1 {
  padding-top: 2em;
  margin-top: 1em;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
/* 合作结束 */
/* 新闻资讯开始 */
.xwzx h1 {
  font-size: 30px;
  text-align: center;
  margin-top: 2em;
}
.zwwld {
  font-size: 18px;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 2em;
}
.xwzx {
  width: 1200px;
  height: 730px;
  margin: 0 auto;
}
.dmcdt {
  float: left;
  width: 800px;
  overflow: hidden;
}
.gengd p {
  color: #000099;
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 5px;
}
.gengd span {
  float: right;
  margin-top: -25px;
  overflow: hidden;
}
.zxdts {
  width: 800px;
  height: 430px;
  background: #f3f3f3;
  margin-top: 1em;
}
.anquanding img {
  width: 300px;
  height: 170px;
  object-fit: cover;
  margin-top: 20px;
}
.leftt img {
  width: 300px;
  height: 170px;
  margin-top: 20px;
}
.anquanding {
  float: left;
  width: 330px;
  padding: 1em;
  margin-left: 2em;
  overflow: hidden;
}
.anquanding p {
  font-size: 18px;
  padding: 15px 0px;
}
.anquanding span {
  display: block;
  font-size: 14px;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  text-overflow: ellipsis;
  overflow:hidden;
  /* padding: 0px 0px 10px 0px; */
}
.kaoguimo {
  float: right;
  width: 330px;
  padding: 1em;
  overflow: hidden;
  margin-right: 2em;
}
.kaoguimo p {
  font-size: 18px;
  padding: 40px 0px 40px 0px;
}
.kaoguimo span {
  display: block;
  font-size: 14px;
  padding: 0px 0px 10px 0px;
}
.lizuhangye {
  width: 800px;
  height: 110px;
  background: #f3f3f3;
  margin-top: 1em;
}
.lizuhangye span {
  float: right;
  font-size: 15px;
  color: #666;
  margin-right: 40px;
  overflow: hidden;
}
.lizuhangye ul li {
  font-size: 15px;
  list-style-type: circle;
  list-style-position: inside;
  color: #666;
  padding: 5px 15px;
  padding-top: 7px;
}
.dmcbk {
  float: right;
  width: 380px;
  overflow: hidden;
}
.baike p {
  color: #000099;
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 5px;
}
.baike span {
  float: right;
  margin-top: -25px;
  overflow: hidden;
}
.dmcbks {
  background: #f3f3f3;
  margin-top: 1.08em;
  height: 555px;
}
.dmcbk img {
  width: 300px;
  padding: 20px 40px;
}
.dmcbkx ul li {
  /* width: 350px; */
  font-size: 13px;
  /* list-style-type: circle;
  list-style-position: inside; */
  color: #666;
  /* padding: 5px 70px; */
  text-align: center;
  margin-top: 5px;
}
.one_over{
  width: 80%;
  margin: 0 auto;
  /* white-space: normal; */
}
.one_over:hover{
  color: #0061ae;
}
/* 新闻资讯结束 */
/* 关于我们开始 */
.guanyu {
  width: 100%;
  height: 350px;
  background: url("../assets/zzz.jpg") no-repeat;
  background-size: 100% 400px;
  padding-top: 100px;
  overflow: hidden;
  margin-top: 2em;
}
.bjtp {
  background-color: #fff;
  width: 1200px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
}
.zoujin {
  width: 1000px;
  margin: 0 auto;
}
.zoujin h3 {
  font-size: 20px;
  padding-top: 40px;
}
.zoujin h1 {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}
.guanyu h2 {
  /* padding-top: 10px; */
  text-align: center;
}
.wenben {
  /* padding: 20px; */
  font-size: 16px;
  width: 1000px;
  text-indent: 40px;
  letter-spacing: 2px;
  height: 180px;
  overflow-y: auto;
}
.zhengshu {
  width: 100%;
  height: 280px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.swiper {
  /* width: 1148px; */
  width: 100%;
  min-width: 1200px;
}
.swiper1{
  width: 1200px;
}
.zhengshu img {
  width: 200px;
  height: 280px;
}
.swiper-button-prev {
  position: absolute;
  top: 50%;
  left: 3%;
}
.swiper-button-next {
  position: absolute;
  top: 50%;
  right: 3%;
}
.zhengshu .swiper-slide {
  width: 200px; /*设为固定值*/
}
/* 关于我们结束 */
</style>